<template>
    <view  >
      <view @click="toSearch">
        <search-bar  placeholder="搜索商品"/>
      </view>
            <!-- 轮播图 -->
        <view>
            <swiper
                indicator-dots
                autoplay
                circular
            >
                <swiper-item class="swiper-item" v-for="item in swiper" :key="item.goods_id">
                    <image
                        :src="item.image_src"
                    />
                </swiper-item>
            </swiper>
        </view>
        <!-- 分类导航 -->
        <view class="nav-list">
                <image class="nav-img" v-for="item in navList" :key="item.name" @click="navClick(item)"
                    :src="item.image_src"
                />
        </view>
        <!-- 楼层渲染 -->
         <!-- 楼层 -->
        <view>
      <view v-for="item in floorList" :key="item.floor_title.image_src">
        <!-- 标题区域 -->
        <image
          class="floor-title"
          :src="item.floor_title.image_src"
          mode="widthFix"
        />
        <!-- 楼层图片区域 -->
        <view class="floor-img-box">
          <!-- 左边图片 -->
          <navigator
            :url="item.product_list[0].navigator_url"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <!-- 左侧大图片的盒子 -->
            <image
              :style="{
                width: item.product_list[0].image_width + 'rpx'
              }"
              mode="widthFix"
              :src="item.product_list[0].image_src"
            />
          </navigator>
          <!-- 右边图片 -->
          <view class="right-img-box">
            <!-- 右侧 4 个小图片的盒子 -->
            <navigator
              :url="subitem.navigator_url"
              open-type="navigate"
              hover-class="navigator-hover"
              v-for="(subitem, index) in item.product_list"
              v-show="index > 0"
              :key="subitem.name"
            >
              <image
                :src="subitem.image_src"
                mode="widthFix"
                :style="{ width: subitem.image_width + 'rpx' }"
              />
            </navigator>
          </view>
        </view>
      </view>
        </view>
    </view>
</template>
<script>
export default {
    data(){
        return {
            swiper:[],
            navList:[],
            floorList: []
        }
    },
    onLoad(){
        this.getSwiperData()
        this.getNavListData()
        this.getFloorList()
    },
    methods:{
        //  轮播图
        async getSwiperData(){
            const res = await uni.$request({
                url:'home/swiperdata'
            })
            if(res.meta.status === 200){
        this.swiper = res.message
            }

        },
        // 分类导航
        async getNavListData(){
            const res = await uni.$request({
                url:'home/catitems'
            })
            if(res.meta.status === 200){
                this.navList = res.message
            }
        },
        navClick({name}){
            if(name === '分类'){
                uni.switchTab({ url: '/pages/category/index' })
            }
        },
        // 楼层
        async getFloorList(){
            const res = await uni.$request({
                url:'home/floordata'
            })
            if(res.meta.status === 200){
                this.floorList = res.message
            }
        },
        toSearch(){
          uni.navigateTo({ url: '/subpkg/search/index' })
        }
    }
}
</script>
<style lang="scss" scoped>
    swiper {
      height: 400rpx;

      .swiper-item,
      image {
        width: 100%;
        height: 100%;
      }
    }
    .nav-list {
      display: flex;
      justify-content: space-around;
      margin: 15px 0;

      .nav-img {
        width: 128rpx;
        height: 140rpx;
      }
    }
     .floor-title {
      height: 60rpx;
      width: 100%;
      display: flex;
    }
    .right-img-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .floor-img-box {
      display: flex;
      padding-left: 10rpx;
    }
    
</style>